<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<meta name="viewport" content="user-scalable=no"/>
	<title>折叠菜单</title>
	<link rel="stylesheet" href="../common/jquery.mobile-1.1.0.min.css" />
	<link rel="stylesheet" href="../common/BingoTouch.css" /> 
	<script src="../common/iscroll.js"></script>
	<script src="../common/jquery-1.7.1.min.js"></script>
	<script src="../common/jquery.mobile-1.1.0.min.js"></script>
	<script src="../common/BingoTouch.js"></script>
</head>
<body>
<div data-role="page" class="container">
   <div data-role="content">
		<div class="header">
			<h1 class="title">collapse</h1>
			<div class="header-left">
				<div class="btn-back" data-role="BTButton" data-url="home.html">返回</div>
			</div>
			<div class="header-right">
				<!-- 右边按钮区域 -->
			</div>	
		</div>
		<div class="content">
			<div class="content-inner">		
				<h2>1.能打开多个的折叠菜单 </h2>
				<div class="collapses">
					<div class="collapse">
						<div class="collapse-header">
							<div data-role="BTButton" data-icon="icon-plus" icon-dir="left">所有图标</div>
						</div>
						<div class="collapse-content">
							<img src="statics/images/map.png" alt=""/>
						</div>
					</div>
					<div class="collapse">
						<div class="collapse-header">
							<div data-role="BTButton" data-icon="icon-plus" icon-dir="left">所有按钮</div>
						</div>
						<div class="collapse-content">
							<div data-role="BTButton">普通按钮</div>
							<div class="btn-primary" data-role="BTButton">主要按钮</div>
						</div>
					</div>
				</div>		
				如果需要默认显示，就加个class=show BTButton的data-icon="icon-plus icon-minus"
				<div class="collapses">
					<!-- 这里的class=show就默认显示 -->
					<div class="collapse show">
						<div class="collapse-header">
							<div data-role="BTButton" data-icon="icon-plus icon-minus" icon-dir="left">所有图标</div>
						</div>
						<div class="collapse-content">
							<img src="statics/images/map.png" alt=""/>
						</div>
					</div>
					<div class="collapse">
						<div class="collapse-header">
							<div data-role="BTButton" data-icon="icon-plus" icon-dir="left">所有按钮</div>
						</div>
						<div class="collapse-content">
							<div data-role="BTButton">普通按钮</div>
							<div class="btn-primary" data-role="BTButton">主要按钮</div>
						</div>
					</div>
				</div>		
				<h2>2.列表折叠菜单 —— 1次只能显示1个内容</h2>				
				class="list-view list-collapse" 在列表的结构加多一个样式，就变成列表折叠菜单
				<ul class="list-view list-collapse">
					<li><div data-role="BTButton" data-icon="icon-list-down" icon-dir="right" mousedown="false" mouseup="false">折叠按钮1</div>
						<div class="collapse-content">
							<img src="statics/images/map.png" alt=""/>
						</div>
					</li>
					<li><div data-role="BTButton" data-icon="icon-list-down" icon-dir="right" mousedown="false" mouseup="false">折叠按钮2</div>
						<div class="collapse-content">
							<img src="statics/images/map.png" alt=""/>
						</div>
					</li>
					<li><div data-role="BTButton" data-icon="icon-list-down" icon-dir="right" mousedown="false" mouseup="false">折叠按钮3</div>
						<div class="collapse-content">
							<img src="statics/images/map.png" alt=""/>
						</div>
					</li>
				</ul>
				需要默认显示时 在 data-role="BTButton" 加多个class="btn-active"
				<ul class="list-view list-collapse">
					<li><div data-role="BTButton" class="btn-active" data-icon="icon-list-down" icon-dir="right" mousedown="false" mouseup="false">折叠按钮1</div>
						<div class="collapse-content">
							<img src="statics/images/map.png" alt=""/>
						</div>
					</li>
					<li><div data-role="BTButton" data-icon="icon-list-down" icon-dir="right" mousedown="false" mouseup="false">折叠按钮2</div>
						<div class="collapse-content">
							<img src="statics/images/map.png" alt=""/>
						</div>
					</li>
					<li><div data-role="BTButton" data-icon="icon-list-down" icon-dir="right" mousedown="false" mouseup="false">折叠按钮3</div>
						<div class="collapse-content">
							<img src="statics/images/map.png" alt=""/>
						</div>
					</li>
				</ul>
			</div>
		</div>		
	</div>
</div>
</body>
</html>